<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">

        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        html, body {
            width: 100%;
            height: 100%;
        }

        /*  单行省略  */
        .singleline-omit {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        /*多行省略*/
        .multiline-omit {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            /*代表多少行~~*/
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
        }


        #header {
            width: 100%;
            height: 686px;
            background: burlywood;
        }


        #content {
            width: 100%;
            height: 2060px;
            padding-top: 20px;
            background-color: gainsboro;
        }


        /* 中间区域需要水平居中 */
        #container {
            width: 1068px;
            height: 100%;
            margin: 0 auto;
        }


        #content-left {
            width: 780px;
            height: 100%;
            float: left;
            background: gainsboro;
        }

        /*
          四个小分区宽度一样；都有内边距；除最后一个外，底部都有margin.
          共有的属性，一般写在一起回好一些。方便同时修改，节省代码量。
        */
        #content-left > div {
            width: 780px;
            padding: 20px;
            margin-bottom: 20px;
            /*
             防止padding把区域变大。
             */
            box-sizing: border-box;
            background: white;
        }


        /*==================热门课程*/
        #hot-class {
            height: 355px;
        }


        .title {
            height: 24px;
            line-height: 24px;
            /* 文本的胖瘦  */
            font-weight: 100;
            margin-bottom: 20px;
        }

        .title > img {
            margin-right: 13px;
        }

        .title > a {
            float: right;
            text-decoration: none;
            color: gray;
        }

        .text-content > li {
            float: left;
            width: 230px;
            height: 275px;
            margin-right: 25px;
        }

        /*最后一个li没有外边距*/
        .text-content > li:last-child {
            margin-right: 0px;
        }

        .text-content > li > img {
            width: 230px;
            height: 160px;
            border-bottom: 3px solid cyan;
        }


        .text-content > li > a {
            text-decoration: none;
            color: black;
            margin: 10px 0;
            display: block;
        }


        .text-content > li > p {
            color: gray;
            height: 50px;
            width: 190px;
            font-size: 12px;
        }


        /* =================干货分享 */

        #good-share {
            height: 500px;
        }


        .share-content > li {
            width: 740px;
            height: 130px;
            background: gainsboro url("imgs/img-daxue/icon-at.png") no-repeat 650px -20px;
            margin-bottom: 15px;
            padding: 20px;
            box-sizing: border-box;
        }

        .share-content > li:nth-child(2) {
            background-image: url("imgs/img-daxue/icon-video.png");
        }

        .share-content > li:last-child {
            background-image: url("imgs/img-daxue/icon-laptop.png");
        }


        .share-content .share-pic {
            float: left;
            width: 124px;
            margin-right: 20px;
        }

        .share-content .share-text {
            float: left;
            width: 480px;
            height: 85px;
            font-size: 15px;
        }


        .share-text > h3, .share-text > p {
            font-size: 15px;
            font-weight: 200;
        }


        .share-text .time-icon {
            width: 12px;
            height: 12px;
            /*span标签没有宽高*/
            display: inline-block;
            margin-right: 10px;
            background: url("imgs/img-daxue/icons.png") no-repeat 0px -6px;
        }

        .share-text .time {
            color: grey;
            font-size: 13px;
            display: inline-block;
        }


        /*=================专题课程*/
        #special-class {
            height: 355px;
        }

        /*由于和热门课程的CSS一样，所以就使用了同样的CSS了*/


        /*=================精品课程*/
        #elaborate-class {
            height: 790px;
            /* 最后一个底部没有距离 */
            margin-bottom: 0;
        }

        .elaborate-content {
            width: 735px;
            height: 735px;
        }


        .elaborate-content>li {
            float: left;
            width: 350px;
            height: 350px;
            margin-bottom: 16px;
        }

        .elaborate-content>li>img {
            width: 350px;
        }

        .elaborate-content>li:nth-child(2n+1) {
            margin-right: 32px;
        }

        .elaborate-content>li>h3 {
            margin-bottom: 20px;
        }

        .elaborate-content>li>h3>a {
            width: 34px;
            height: 7px;
            font-size: 6px;
            display: inline-block;
            text-decoration: none;
            color: gainsboro;
        }

        .elaborate-content .title-icon {
            width: 300px;
            height: 24px;
            display: inline-block;
            background: url("imgs/img-daxue/bout-title-bg.png");
            padding-left: 30px;
            padding-bottom: 8px;
            font-size: 16px;
            box-sizing: border-box;
        }

        .elaborate-content li:nth-of-type(2) .title-icon {
            background-position: 0px -24px;
        }

        .elaborate-content li:nth-of-type(3) .title-icon{
            background-position: 0px -48px;
        }

        .elaborate-content li:last-of-type .title-icon{
            background-position: 0px -72px;
        }

        .elaborate-content>li>p {
            font-size: 13px;
            margin: 8px 0;
        }

        .elaborate-content>li>p:nth-of-type(2) {
            color: gray;
        }


        /*====================================底部颜色分割线*/

        #color-split-line {
            width: 100%;
            height: 4px;
        }

        #color-split-line>li {
            float: left;
            width: 25%;
            height: 4px;
            list-style: none;
            background-color: deepskyblue;
        }

        #color-split-line>li:nth-child(2) {
            background-color: orange;
        }

        #color-split-line>li:nth-child(3) {
            background-color: green;
        }

        #color-split-line>li:last-child {
            background-color: brown;
        }


        #content-right {
            width: 270px;
            height: 100%;
            padding: 22px;
            float: right;
            /* 防止内边距把区域变大 */
            box-sizing: border-box;
            background: white;
        }

        #footer {
            width: 100%;
            height: 350px;
            background: aquamarine;
        }

    </style>
</head>

<body>

<header id="header">

</header>

<article id="content">

    <article id="container">

        <section id="content-left">

            <div id="hot-class">
                <h3 class="title">
                    <img src="imgs/img-daxue/icon-lesson.png"/>
                    热门课程
                    <a href="#">more</a>
                </h3>
                <ul class="text-content">
                    <li>
                        <img src="imgs/img-daxue/1510243888411.png"/>
                        <a href="#">纪念碑谷2背后的灵感</a>
                        <p class="multiline-omit">本期大师班推出特别版，专程邀请了《纪念碑谷2》游戏主美、艺术总监David</p>
                    </li>
                    <li>
                        <img src="imgs/img-daxue/1509872683613.jpg"/>
                        <a href="#">霍金：突破摄星的目标在于实...</a>
                        <p class="multiline-omit">11月5日，在腾讯we大会上，著名物理学家霍金以视频演讲的方式向人们阐释了</p>
                    </li>
                    <li>
                        <img src="imgs/img-daxue/1509450636364.png"/>
                        <a href="#">青山周平-我的设计理想国</a>
                        <p class="multiline-omit">B.L.U.E.建筑事务所创始人。通过巧妙的空间设计完美解决了普通家庭的居.通过巧妙的空间设计完美解决了普通家庭的居</p>
                    </li>
                </ul>
            </div>

            <div id="good-share">
                <h3 class="title">
                    <img src="imgs/img-daxue/icon-share.png"/>
                    干货分享
                    <a href="#">more</a>
                </h3>
                <ul class="share-content">
                    <li>
                        <img class="share-pic" src="imgs/img-daxue/1509095853300.png"/>
                        <div class="share-text">
                            <h3>JetBrains开发日</h3>
                            <p>
                                <span class="time-icon"></span>
                                <span class="time">20XX年XX月XX日</span>
                            </p>
                            <p>Kotlin 编程语言的设计和创始人 Andrey Breslav 、JetBrains 开发者宣传推广副总裁 Hadi Hariri做客腾大， 与你来一场技术盛宴。</p>
                        </div>
                    </li>
                    <li>
                        <img class="share-pic" src="imgs/img-daxue/1509098009686.png"/>
                        <div class="share-text">
                            <h3>JetBrains开发日</h3>
                            <p>
                                <span class="time-icon"></span>
                                <span class="time">20XX年XX月XX日</span>
                            </p>
                            <p>Kotlin 编程语言的设计和创始人 Andrey Breslav 、JetBrains 开发者宣传推广副总裁 Hadi Hariri做客腾大， 与你来一场技术盛宴。</p>
                        </div>
                    </li>
                    <li>
                        <img class="share-pic" src="imgs/img-daxue/1509509065544.png"/>
                        <div class="share-text">
                            <h3>JetBrains开发日</h3>
                            <p>
                                <span class="time-icon"></span>
                                <span class="time">20XX年XX月XX日</span>
                            </p>
                            <p>Kotlin 编程语言的设计和创始人 Andrey Breslav 、JetBrains 开发者宣传推广副总裁 Hadi Hariri做客腾大， 与你来一场技术盛宴。</p>
                        </div>
                    </li>
                </ul>
            </div>

            <div id="special-class">
                <h3 class="title">
                    <img src="imgs/img-daxue/icon-lesson.png"/>
                    专题课程
                    <a href="#">more</a>
                </h3>
                <ul class="text-content">
                    <li>
                        <img src="imgs/img-daxue/1509854541448.jpg"/>
                        <a href="#">纪念碑谷2背后的灵感</a>
                        <p class="multiline-omit">本期大师班推出特别版，专程邀请了《纪念碑谷2》游戏主美、艺术总监David</p>
                    </li>
                    <li>
                        <img src="imgs/img-daxue/1510548125915.jpg"/>
                        <a href="#">霍金：突破摄星的目标在于实...</a>
                        <p class="multiline-omit">11月5日，在腾讯we大会上，著名物理学家霍金以视频演讲的方式向人们阐释了</p>
                    </li>
                    <li>
                        <img src="imgs/img-daxue/1509854541448.jpg"/>
                        <a href="#">青山周平-我的设计理想国</a>
                        <p class="multiline-omit">B.L.U.E.建筑事务所创始人。通过巧妙的空间设计完美解决了普通家庭的居.通过巧妙的空间设计完美解决了普通家庭的居</p>
                    </li>
                </ul>
            </div>

            <div id="elaborate-class">
                <h3 class="title">
                    <img src="imgs/img-daxue/icon-lesson.png"/>
                    精品课程
                    <a href="#">more</a>
                </h3>

                <ul class="elaborate-content">
                    <li>
                        <h3>
                            <span class="title-icon">产品-营销</span>
                            <a href="#">more</a>
                        </h3>
                        <img src="imgs/img-daxue/1509509065544.png"/>
                        <p>腾讯王莹：视频内容消费下的营销升级</p>
                        <p>腾讯视频通过以视频内容生态为基础，实现营销价值的升级是腾讯视频连接内容，引爆营销的方法。</p>
                    </li>
                    <li>
                        <h3>
                            <span class="title-icon">设计-用研</span>
                            <a href="#">more</a>
                        </h3>
                        <img src="imgs/img-daxue/1505999675421.png"/>
                        <p>腾讯王莹：视频内容消费下的营销升级</p>
                        <p>腾讯视频通过以视频内容生态为基础，实现营销价值的升级是腾讯视频连接内容，引爆营销的方法。</p>
                    </li>
                    <li>
                        <h3>
                            <span class="title-icon">技术-运维</span>
                            <a href="#">more</a>
                        </h3>
                        <img src="imgs/img-daxue/1509095853300.png"/>
                        <p>腾讯王莹：视频内容消费下的营销升级</p>
                        <p>腾讯视频通过以视频内容生态为基础，实现营销价值的升级是腾讯视频连接内容，引爆营销的方法。</p>
                    </li>

                    <li>
                        <h3>
                            <span class="title-icon">行业-创业</span>
                            <a href="#">more</a>
                        </h3>
                        <img src="imgs/img-daxue/1510650852264.jpg"/>
                        <p>腾讯王莹：视频内容消费下的营销升级</p>
                        <p>腾讯视频通过以视频内容生态为基础，实现营销价值的升级是腾讯视频连接内容，引爆营销的方法。</p>
                    </li>
                </ul>
            </div>
        </section>

        <aside id="content-right"></aside>

    </article>

</article>

<ul id="color-split-line">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

<footer id="footer"></footer>

</body>
</html>